<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<title>SameGame</title>
		<script type="text/javascript" src="https://www.google.com/jsapi"></script>
		<script type="text/javascript" src="tgd/Contests/SameGame/DAO.js"></script>
		<script type="text/javascript">
			//<![CDATA[
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

//http://infinitesearchspace.dyndns.org/samegame

var game;



function drawChart() {
	var dao = new tgd.Contests.SameGame.DAO();
	var data = new google.visualization.DataTable();
	data.addColumn('number', 'Puzzle Number');
	data.addColumn('number', 'Best');
	data.addColumn('number', 'Max');

	for (var i = 1; i <= 25; ++i) {
		data.addRow([i, dao.getBest(i).Max, dao.getMax(i)]);
	}

	var options = {
	  width: 400, height: 240,
	  title: 'SameGame'
	};

	var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
	chart.draw(data, options);
}



function init() {
	var dao = new tgd.Contests.SameGame.DAO();
	var puzzleNumber = (location.search.match(/\d+/g) === null) ? 1 : parseInt(location.search.match(/\d+/g)[0]); 

	displayBest();

	var worker = new Worker("tgd/Contests/SameGame/Thread.js");

	worker.onmessage = function(msg) {
		dao.setBest(puzzleNumber, msg.data);
		console.log(msg.data);
		document.getElementById("txtSolution").value = msg.data.Game;
		document.getElementById("lblScore").textContent = msg.data.Max;
		var div = document.createElement("div");
		div.textContent = new Date() + "   ---   " + msg.data.Max + "   ---   " + msg.data.Game
		document.getElementById("panFields").appendChild(div);
		displayBest();
	}

	worker.onerror = function(e) { console.error(e); }

	worker.postMessage({ ID : puzzleNumber, Max : dao.getBest(puzzleNumber).Max });
}

function displayBest() {
	var dao = new tgd.Contests.SameGame.DAO();
	var txtResults = document.getElementById("txtResults");
	txtResults.value = ""
	
	for (var i = 1; i <= 25; ++i) {
		var best = dao.getBest(i);
		txtResults.value += best.Max + "   ---   " + best.Game + "\n\n" 
	}
}

function loadBest() {
	var dao = new tgd.Contests.SameGame.DAO();
	dao.clear();
	var data = document.getElementById("txtBest").value.split('\n');
	
	for (var i = 0; i < data.length; ++i) {
		var best = data[i].match(/\d+/g)[0];
		var max = data[i].match(/\d+/g)[1];
		dao.setBest(i + 1, { Max : best, Game : ""} );
		dao.setMax(i + 1, max);
	}
}








			//]]>
		</script>

		<style type="text/css">
			body,html{margin:0;padding:0;}
			#panFields table{margin:20px;background:#000;border-collapse:collapse;float:left;}
			#panFields td{height:2px;width:2px;border:solid 1px #ccc}
			#txtSolution{width:95%;}
			#txtResults{width:100%;}

#panLatest,#panBestInput,#panFields,#panResults{padding:10px;position:fixed;border:solid 1px #0f0;background:#ccc;}
#panLatest{top:0;right:0;width:278px;z-index:2;}
#panBestInput{bottom:0;right:0;width:278px;}
#panFields{bottom:322px;left:0;right:300px;overflow:auto;height:250px;}
#panResults{height:300px;bottom:0;left:0;right:300px;overflow:auto;}

		</style>
	</head>
	<body onload="init();">
		<div id="panLatest">
			<span id="lblScore"></span>
			<textarea rows="20" id="txtSolution"></textarea>
		</div>
		<div id="panFields"></div>
		<div id="panBestInput">
			<textarea rows="25" id="txtBest"></textarea>
			<input type="button" value="Load" onclick="loadBest();" />
		</div>
		<div id="panResults">
			<textarea rows="18
			" id="txtResults"></textarea>
		</div>
		<div id="chart_div"></div>
	</body>
</html>
